iT邦幫忙

2024 iThome 鐵人賽

DAY 8
1

函數

參數與返回值

參數:

  • 函數可以接受零個或多個參數

  • 參數是在函數定義時指定的變量名

  • 實際值在函數調用時傳入

返回值:

  • 使用return關鍵字指定函數的返回值

  • 如果沒有指定返回值,函數默認返回undefined

  • return語句會立即結束函數的執行並返回指定的值


//輸入參數## 

function add(a, b) { 

  return a + b; //返回參數 

} 

函數的創建與調用

函數在js屬於第一類對象(First-class Functions),他有四個主要的特性

  1. 被賦值給變量

// 函數聲明 

function greet(name) { 

    return `Hello, ${name}!`; 

} 

  

// 將函數賦值給變量 

let sayHello = greet; 

  

console.log(sayHello("Alice")); // 輸出: Hello, Alice! 

  1. 作為參數傳遞給其他函數

function operate(x, y, operation) { 

    return operation(x, y); 

} 

  

function add(a, b) { 

    return a + b; 

} 

  

function multiply(a, b) { 

    return a * b; 

} 

  

console.log(operate(5, 3, add));      // 輸出: 8 

console.log(operate(5, 3, multiply)); // 輸出: 15 

  1. 作為函數的返回值

function createMultiplier(factor) { 

    return function(number) { 

        return number * factor; 

    }; 

} 

  

let double = createMultiplier(2); 

let triple = createMultiplier(3); 

  

console.log(double(5)); // 輸出: 10 

console.log(triple(5)); // 輸出: 15 

  1. 被存儲在數據結構中

let mathOperations = { 

    add: (a, b) => a + b, 

    subtract: (a, b) => a - b, 

    multiply: (a, b) => a * b, 

    divide: (a, b) => a / b 

}; 

  

console.log(mathOperations.add(5, 3));      // 輸出: 8 

console.log(mathOperations.multiply(4, 2)); // 輸出: 8 

除此之外,函數還有兩個值得注意的地方:

  • 函數聲明後會被提升(hoisted),意味著可以在定義之前調用函數。

  • 形成獨立的作用域。

函數表達式

將匿名函數賦值給變量:


let functionName = function(parameter1, parameter2, ...) { 

    // 函數體 

    return result; // 可選 

}; 

特點:

  • 不會被提升,必須在定義後才能使用。

  • 可以創建匿名函數。

箭頭函數(Arrow Function)

箭頭函數是js在ES6中引入的一種函數語法。它為JavaScript帶來了更簡潔的語法和更直觀的作用域處理,特別適合用於簡短的函數表達式和回調函數。然而,它們並不是傳統函數的完全替代,在選擇使用時需要考慮具體的使用場景和需求。


///原函數 

let functionName = (parameter1, parameter2, ...) => { 

    // 函數體 

    return result; // 可選 

}; 

  

///可以簡寫成這樣 

let functionName = (parameter1, parameter2, ...) => expression; 

例子:


let multiply = (a, b) => a * b; 

  

console.log(multiply(4, 5)); // 輸出:20 

綜上所述,箭頭函數帶來了這些優點:

  • 更簡潔的語法,特別是對於簡單的函數。

  • 詞法作用域的 this,避免了傳統函數中this綁定的問題。

  • 適合用於函數式編程,如 map、reduce、filter 等操作。

注意事項:

  • 箭頭函數沒有自己的 this、arguments、super 或 new.target。

  • 不能用作構造函數。

  • 不適合用作對象方法(除非你明確不需要方法中的 this 指向該對象)。

  • 沒有 prototype 屬性。

方法定義

  • 在對象字面量中定義函數,白話一點就是在一個變量中直接在中定義一個方法。

let person = { 

    name: "Alice", 

    greet() { 

        console.log(`Hello, my name is ${this.name}`); 

    } 

}; 

person.greet(); // 輸出:Hello, my name is Alice 

在這個例子中,greet就是直接在person對象中定義的方法。

  • 除此之外,他還可以在一個對象中定義多個方法。

let calculator = { 

    add(a, b) { 

        return a + b; 

    }, 

    subtract(a, b) { 

        return a - b; 

    }, 

    multiply(a, b) { 

        return a * b; 

    }, 

    divide(a, b) { 

        return a / b; 

    } 

}; 

  

console.log(calculator.add(5, 3));      // 輸出:8 

console.log(calculator.subtract(10, 4)); // 輸出:6 

console.log(calculator.multiply(2, 6)); // 輸出:12 

console.log(calculator.divide(15, 3));  // 輸出:5 

  • ES6還允許我們使用計算屬性名來定義方法:

let methodName = "sayHello"; 

  

let greeter = { 

    [methodName]() { 

        console.log("Hello!"); 

    } 

}; 

  

greeter.sayHello(); // 輸出:Hello! 

這就使得我們可以動態地定義方法名。

綜上所述,方法定義帶來了這些優點:

  • 簡潔的語法:比傳統的key: function() {}語法更簡潔。

  • 自動綁定this:方法中的this自動綁定到對象實例。

  • 代碼組織:將相關的方法和數據組織在一起,提高代碼的可讀性和維護性。

  • 封裝:可以實現簡單的對象封裝,將數據和行為綑綁在一起。

不過這種方法定義方式與傳統的對象.方法 =function() {}方式在功能上是完全等價的,主要區別在於語法的簡潔性和代碼的組織方式。


發現函數的部分能講的意外的多,故將函數分為上下半部分,將學習計畫向後延一天


上一篇
d7 控制結構
下一篇
d9 函數(下)
系列文
javascript基礎自學及各工具應用了解30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言